<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <style rel="stylesheet">
        * {
            padding: 0;
            margin: 0;
            border: none;
        }

        body {
            font-size: 10px;
        }

        img {
            width: 100%;
        }

        .fileDiv {
            width: 2em;
            background: red;
            color: #fff;
            font-size: 1.8em;
            text-align: center;
            overflow: hidden;
            position: relative;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            margin-left: 0.5em;
            margin-top: 0.5em;
            float: left;
        }

        .file {
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<img src="images/min_1.jpg" id="portrait">
<div class="fileDiv">
    +
    <input type="file" class="file" onchange="showPreview(this)">
</div>
<div class="fileDiv">
    +
    <input type="file" class="file" onchange="showPreview(this)">
</div>
<div class="fileDiv">
    +
    <input type="file" class="file" onchange="showPreview(this)">
</div>

<form>
    <fieldset>
        <legend>分度读取文件：</legend>
        <input type="file" id="File" />
        <input type="button" value="中断" id="Abort" />
        <p>
            <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>
        </p>
        <p id="Status"></p>
    </fieldset>
</form>


<script src="js/zepto.min.js" type="text/javascript"></script>
<script>
    function showPreview(source) {
        var file = source.files[0];
        /*if (!/image\/\w+/.test(file.type)) {
         alert("请确保文件为图像类型");
         return false;
         }*/
        if (window.FileReader) {
            var fr = new FileReader();
            fr.onload = function (e) {
                $("#portrait").attr("src", e.target.result);
                console.log(fr.readyState);
            };
            fr.onerror = function (e) {
            };
            fr.onabort = function (e) {
            };
            fr.onprogress=function(e){
            }
            fr.readAsDataURL(file);
            console.log(fr.readyState);
        }
    }

//    进度条
    var h = {
        init: function() {
            var me = this;

            document.getElementById('File').onchange = me.fileHandler;
            document.getElementById('Abort').onclick = me.abortHandler;

            me.status = document.getElementById('Status');
            me.progress = document.getElementById('Progress');
            me.percent = document.getElementById('Percent');

            me.loaded = 0;
            //每次读取1M
            me.step = 1024 * 1024;
            me.times = 0;
        },
        fileHandler: function(e) {
            var me = h;

            var file = me.file = this.files[0];

            var reader = me.reader = new FileReader();

            //
            me.total = file.size;

            reader.onloadstart = me.onLoadStart;
            reader.onprogress = me.onProgress;
            reader.onabort = me.onAbort;
            reader.onerror = me.onerror;
            reader.onload = me.onLoad;
            reader.onloadend = me.onLoadEnd;
            //读取第一块
            me.readBlob(file, 0);
        },
        onLoadStart: function() {
            var me = h;
        },
        onProgress: function(e) {
            var me = h;

            me.loaded += e.loaded;
            //更新进度条
            me.progress.value = (me.loaded / me.total) * 100;
        },
        onAbort: function() {
            var me = h;
        },
        onError: function() {
            var me = h;

        },
        onLoad: function() {
            var me = h;

            if(me.loaded < me.total) {
                me.readBlob(me.loaded);
            } else {
                me.loaded = me.total;
            }
        },
        onLoadEnd: function() {
            var me = h;

        },
        readBlob: function(start) {
            var me = h;

            var blob,
                    file = me.file;

            me.times += 1;

            if(file.webkitSlice) {
                blob = file.webkitSlice(start, start + me.step + 1);
            } else if(file.mozSlice) {
                blob = file.mozSlice(start, start + me.step + 1);
            }

            me.reader.readAsText(blob);
        },
        abortHandler: function() {
            var me = h;

            if(me.reader) {
                me.reader.abort();
            }
        }
    };

    h.init();
</script>

</body>
</html>